<!DOCTYPE html>
<html>
    <head>
        <link href="../css/style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fauna+One">
        <script type="text/javascript" src="../js/script.js"></script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
    
    <body onload="fillTable(predictionData, 'familyInfoTable', maxTableSize);setupSectionButtons(predictionData, maxTableSize, 'btn')">
        <div class="navbar">
            <ul class="navbar">
                <li class="navbar" id="logo"><a href="https://github.com/bergmanlab/mcclintock" target="_blank" class="logo">McClintock</a></li>
                <li class="navbar"><a href="../summary.html" class="navbar">Summary</a></li>
                <li class="navbar"><a href="families.html" class="navbar">TE Families</a></li>
                {% if methods|length > 0 %}
                    <li class="navbar dropdown">
                        <a href="#" class="navbar dropdown">TE Detection Methods</a>
                        <div class="dropdown-content">
                            {% for method in methods %}
                                <a href="{{method}}.html" class="dropdown-content">{{method}}</a>
                            {% endfor %}
                        </div>
                    </li>
                {% endif %}
            </ul> 
        </div>

        <div class="row">
            <div class="sidebar">
                <ul class="sidebar">
                    <li class="sidebar"><a href="#familyinfoHeader" class="sidebar">Family Prediction Summary</a></li>
                </ul>
            </div>
            <div class="main">
                <div class="pageHeader">
                    <p class="pageHeader">TE Families</p>
                </div>
                <div class="sectionHeader">
                    <a href="../data/families/family_prediction_summary.txt"  target="_blank"><div class="sectionHeaderRaw">Raw</div></a>
                    <div class="sectionHeaderName">Family Prediction Summary</div>
                    <div class="sectionHeaderHide" id="familyinfoHeader" onclick="hide('familyinfoDiv','familyinfoHeader')">Hide</div>
                </div>
                <div id="familyinfoDiv">
                    <div class="filter">
                        <input type="button" id="filterButton" class="filterButton" name="filterButton" value="Filter" onclick="predictionData = filterData(unmodifiedData,'familyInfoTable', maxTableSize, 'btn', 'filterTable2','filterTable2', 'exactBox2', 'refBox','nonrefBox', true, false, 1, 'allBox')">
                        <input type="text" class="filterTable" id="filterTable2" autocomplete="off" placeholder="">
                        <input type="checkbox" class="checkbox" id="exactBox2" name="exactBox2" autocomplete="off" onclick="predictionData = filterData(unmodifiedData,'familyInfoTable', maxTableSize, 'btn', 'filterTable2','filterTable2', 'exactBox2', 'refBox','nonrefBox', true, false, 1, 'allBox')">
                        <label for="exactBox2">Exact Match</label>
                        <input type="checkbox" class="checkbox" id="refBox" name="refBox" checked="checked" autocomplete="off" onclick="predictionData = filterData(unmodifiedData,'familyInfoTable', maxTableSize, 'btn', 'filterTable2','filterTable2', 'exactBox2', 'refBox','nonrefBox', true, false, 1, 'allBox')">
                        <label for="exactBox2">Reference</label>
                        <input type="checkbox" class="checkbox" id="nonrefBox" name="nonrefBox" checked="checked" autocomplete="off" onclick="predictionData = filterData(unmodifiedData,'familyInfoTable', maxTableSize, 'btn', 'filterTable2','filterTable2', 'exactBox2', 'refBox','nonrefBox', true, false, 1, 'allBox')">
                        <label for="exactBox2">Non-Reference</label>
                        <input type="checkbox" class="checkbox" id="allBox" name="allBox" checked="checked" autocomplete="off" onclick="predictionData = filterData(unmodifiedData,'familyInfoTable', maxTableSize, 'btn', 'filterTable2','filterTable2', 'exactBox2', 'refBox','nonrefBox', true, false, 1, 'allBox')">
                        <label for="exactBox2">All</label>
                    </div>
                    <div class="runinfo largeTable" id="familyinfo">
                        {% if methods|length > 6 %}
                            <table class="run-information" id="familyInfoTable" style="width:1100px;">
                        {% else %}
                            <table class="run-information" id="familyInfoTable" style="width:900px;">
                        {% endif %}
                            <tr>
                                <th class="header" onclick="predictionData = sortTableLarge(predictionData,'familyInfoTable', 0, maxTableSize, 'btn')">TE Family</th>
                                <th class="header" onclick="predictionData = sortTableLarge(predictionData,'familyInfoTable', 1, maxTableSize, 'btn')">Type</th>
                                <th class="header" onclick="predictionData = sortTableLarge(predictionData,'familyInfoTable', 2, maxTableSize, 'btn')"></th>
                                {% set count = namespace(value=3) %}
                                {% for method in methods %}
                                    <th class="header" onclick="predictionData = sortTableLarge(predictionData,'familyInfoTable', {{ count.value }}, maxTableSize, 'btn', numeric=true)">{{method}}</th>
                                    {% set count.value = count.value + 1 %}
                                {% endfor %}
                                
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="pageChanger" id="pageChanger">
                    <button class="pageChanger currentPage" id="btn1" value="1" onclick="showSection(predictionData, 'familyInfoTable', maxTableSize, 'btn1', 'btn')">1</button>
                    <button class="hiddenRange" id="btnh1">...</button>
                    <button class="pageChanger" id="btn2" value="2" onclick="showSection(predictionData, 'familyInfoTable', maxTableSize, 'btn2', 'btn')">2</button>
                    <button class="pageChanger" id="btn3" value="3" onclick="showSection(predictionData, 'familyInfoTable', maxTableSize, 'btn3', 'btn')">3</button>
                    <button class="pageChanger" id="btn4" value="4" onclick="showSection(predictionData, 'familyInfoTable', maxTableSize, 'btn4', 'btn')">4</button>
                    <button class="pageChanger" id="btn5" value="5" onclick="showSection(predictionData, 'familyInfoTable', maxTableSize, 'btn5', 'btn')">5</button>
                    <button class="pageChanger" id="btn6" value="6" onclick="showSection(predictionData, 'familyInfoTable', maxTableSize, 'btn6', 'btn')">6</button>
                    <button class="hiddenRange" id="btnh2">...</button>
                    <button class="pageChanger" id="btn7" value="19" onclick="showSection(predictionData, 'familyInfoTable', maxTableSize, 'btn7', 'btn')">19</button>
                    <button class="goSection" id="btnGo" value="" onclick="goToSection('btnInput', predictionData, 'familyInfoTable', maxTableSize, 'btn')">&rsaquo;</button>
                    <input type="text" class="inputSection" id="btnInput" autocomplete="off" placeholder="">
                </div>
                <div class="spacer2"></div>
            </div>
        </div>
        <!-- data for prediction table -->
        <script>
            var maxTableSize = 20;
            var predictionData = [
                [
                    'TE Family',
                    'Type',
                    '',
                    {% for method in methods %}
                        '{{ method }}',
                    {% endfor %}
                ],
                {% for p in predictions %}
                [
                    '{{ p.family }}',
                    'All',
                    '<a href="{{ p.family }}.html" class="tableLink">Report</a>',
                    {% for val in p.all %}
                    '{{ val }}',
                    {% endfor %}
                ],
                [
                    '{{ p.family }}',
                    'Reference',
                    '-',
                    {% for val in p.reference %}
                    '{{ val }}',
                    {% endfor %}
                ],
                [
                    '{{ p.family }}',
                    'Non-Reference',
                    '-',
                    {% for val in p.nonreference %}
                    '{{ val }}',
                    {% endfor %}
                ],

                {% endfor %}
            ];

            const unmodifiedData = [...predictionData];
        </script>
    </body>

</html>